<template>
    <div class="c-charts" >
        <IEcharts :option="pie"></IEcharts>
    </div>



</template>

<script>
    import vPageTitle from '../common/pageTitle.vue';
    import IEcharts from 'vue-echarts-v3';
    export default {
        components:{
            vPageTitle,IEcharts
        },
        data: () => ({
          pie:{
            title: {
           },
           tooltip : {
               trigger: 'axis',
               axisPointer: {
                   type: 'cross',
                   label: {
                       backgroundColor: '#6a7985'
                   }
               }
           },
           legend: {
               data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
           },
           toolbox: {
               feature: {
                   saveAsImage: {}
               }
           },
           grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
           },
           xAxis : [
               {
                   type : 'category',
                   boundaryGap : false,
                   data : ['周一','周二','周三','周四','周五','周六','周日']
               }
           ],
           yAxis : [
               {
                   type : 'value'
               }
           ],
           series : [
               {
                   name:'邮件营销',
                   type:'line',
                   stack: '总量',
                   areaStyle: {},
                   data:[12, 13, 10, 13, 9, 23, 21]
               },
               {
                   name:'联盟广告',
                   type:'line',
                   stack: '总量',
                   areaStyle: {},
                   data:[22, 18, 19, 23, 29, 33, 31]
               },
               {
                   name:'视频广告',
                   type:'line',
                   stack: '总量',
                   areaStyle: {},
                   data:[15, 23, 20, 15, 19, 33, 41]
               },
               {
                   name:'直接访问',
                   type:'line',
                   stack: '总量',
                   areaStyle: {normal: {}},
                   data:[32, 33, 30, 33, 39, 33, 32]
               },
        
           ]
          }
        })
    }
</script>

<style lang="less" scoped>
    .el-col{
    }
    .material-icons{
        font-size:80px;
        color:#ddd;
    }

    .cart-string{
        height:100px;
        padding-top:10px;
        font-size:1.1rem;

    }
    .c-charts{
        height:400px;
        width:100%;
        text-align: left;
    }

</style>
